<template>
  <div>
    <!-- 使用A模块的state的数据 -->
    <p>{{$store.state.moduleA.username}}</p>
    <!-- 使用A模块的getters的数据 -->
    <p>{{$store.getters.newName}}</p>
    <!-- 使用B模块的state的数据 -->
    <p>{{$store.state.moduleB.username}}</p>
    <!-- 使用B模块的getters的数据 -->
    <p>{{$store.getters['moduleB/newName']}}</p>
    <button @click="mutationsFn">修改姓名</button>
    <button @click="actionsFn">两秒后修改姓名</button>
  </div>
</template>

<script>
import { useStore } from 'vuex'
export default{
  name:'App',
  setup(){
    const store= useStore()
    const mutationsFn=()=>{
      store.commit('moduleB/updateName')
    }
    const actionsFn=()=>{
      store.dispatch('moduleB/updateName')
    }
    return {mutationsFn,actionsFn}
  }
}
</script>

<style>

</style>
